<template>
<div id="boxPlot"></div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'BoxPlot',
    mounted () {
        this.init()
    },
    computed: {
        ...mapGetters({
            univariateData: 'common/getUnivariateData'
        })
    },
    watch: {
        univariateData () {
            this.init()
        }
    },
    methods: {
        init () {
            let myChart = this.$echarts.init(document.getElementById('boxPlot'))
            let list = this.univariateData['箱线图']
            let axisData = []
            let boxData = []
            let outliers = []
            let obj = {}
            for (let i = 0; i < list.length; i++) {
                const key = Object.keys(list[i])[0]
                const item = Object.values(list[i])[0]
                axisData.push(key)
                boxData.push([item.lowerRange, item.Q1, item.Q2, item.Q3, item.upperRange])
                if (item.outliers.length) {
                    for (let n = 0; n < item.outliers.length; n++) {
                        const val = item.outliers[n]
                        if (!obj[val]) {
                            obj[val] = true
                            outliers.push([key, val])
                        }
                    }
                }
            }
            let option = {
                tooltip: {
                    confine: true,
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        showDetail: false,
                        disabled: true
                    },
                    {
                        type: 'inside',
                        showDetail: false,
                        disabled: true
                    }
                ],
                grid: {
                    left: '20px',
                    right: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: axisData,
                    boundaryGap: true,
                    nameGap: 30,
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}',
                        rotate: 30
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '',
                    splitArea: {
                        show: true
                    }
                },
                series: [
                    {
                        name: 'boxplot',
                        type: 'boxplot',
                        data: boxData,
                        tooltip: {
                            formatter: function (param) {
                                return [
                                    param.name,
                                    'upper: ' + param.data[5],
                                    'Q3: ' + param.data[4],
                                    'median: ' + param.data[3],
                                    'Q1: ' + param.data[2],
                                    'lower: ' + param.data[1]
                                ].join('<br/>')
                            }
                        },
                        itemStyle: {
                            borderColor: '#2680EB'
                        }
                    },
                    {
                        name: 'outlier',
                        type: 'scatter',
                        symbolSize: 5,
                        data: outliers
                    }
                ]
            }
            myChart.setOption(option, true)
            window.addEventListener('resize', () => myChart.resize())
            this.$nextTick(() => {
                window.removeEventListener('resize', () => myChart.resize())
            })
        }
    }
}
</script>
<style lang="less">
    #boxPlot {
        height: 400px;
        width: 100%;
    }
</style>
